<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Login Demo</title>
        <script src="https://unpkg.com/vue@3.5.13"></script>
    </head>
    <body>
        <div style="text-align: center" id="Login">
            <h1>{{ title }}</h1>
            <div v-if="noLogin">账号：<input v-model="username" type="text"/></div>
            <div v-if="noLogin">密码：<input v-model="password" type="password"/></div>
            <div v-on:click="click"
                 style="align-content:center; border-radius: 30px;width: 100px;height: 30px;margin: 20px auto; color: white;background-color: blue">
                {{ buttonTitle }}
            </div>
            <script>
                const Login = {
                    data() {
                        return {
                            title: "欢迎您，请登录",
                            noLogin: true,
                            username: "",
                            password: "",
                            buttonTitle: "登录"
                        }
                    },
                    methods: {
                        click() {
                            if (this.noLogin) {
                                this.login()
                            } else {
                                this.logout()
                            }
                        },
                        // 登录
                        login() {
                            if (this.username.length > 0 && this.password.length > 0) {
                                alert("userName:" + this.username + ",password:" + this.password)
                                this.noLogin = false
                                this.title = "欢迎您：" + this.username
                                this.buttonTitle = "注销"
                                this.username = ""
                                this.password = ""
                            } else {
                                alert("请输入账号密码")
                            }
                        },
                        // 登出
                        logout() {
                            //清空登录数据
                            this.noLogin = true
                            this.title = "欢迎您，请登录"
                            this.buttonTitle = "登录"
                        },
                    }
                }
                Vue.createApp(Login).mount('#Login')
            </script>
        </div>
    </body>
</html>